<script lang="ts" setup>
  import { reactive, ref, inject } from 'vue'
  import userService from '@/api/userService'
  import router from '@/router'
  import { encryptedData } from '@/utils/crypto'
  import appStore from '@/store'
  import { ElMessageBox } from 'element-plus'
  import type { FormInstance, FormRules, Action } from 'element-plus'
  type user = {
    username: string
    oldPassword: string
    newPassword: string
    dnewPassword: string
  }
  const formLabelAlign: user = reactive({
    username: appStore.userStore.name,
    oldPassword: '',
    newPassword: '',
    dnewPassword: ''
  })
  const call = () => {
    ElMessageBox.alert('联系管理员XXX,电话:xxxxxxxxxxx', {
      confirmButtonText: 'OK',
      callback: () => {}
    })
  }
  const goLogin = async () => {
    router.push({ name: 'Login' })
  }
  const surePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('密码不能为空'))
    } else if (value !== formLabelAlign.newPassword) {
      callback(new Error('两次密码输入不一致'))
    } else {
      callback()
    }
  }
  const sureOldPass = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('密码不能为空'))
    } else {
      callback()
    }
  }
  const rules = reactive<FormRules>({
    oldPassword: [
      {
        trigger: 'blur',
        validator: sureOldPass
      }
    ],
    newPassword: [
      { message: '请输入新密码', trigger: 'blur' },
      {
        pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@!%*#?&\.])[A-Za-z\d$@!%*#?&\.]{8,}$/,
        message: '至少8个字符，至少1个字母，1个数字和1个特殊字符(特殊字符包括：$@!%*#?&.)',
        trigger: 'blur'
      }
    ],
    dnewPassword: [{ trigger: 'blur', validator: surePass }]
  })
  const param = reactive({
    resconfig: {
      username: '',
      oldPassword: '',
      newPassword: '',
      dnewPassword: ''
    }
  })
  const firstRef = ref<FormInstance>()
  const login = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        param.resconfig = JSON.parse(JSON.stringify(formLabelAlign))
        param.resconfig.oldPassword = encryptedData(param.resconfig.oldPassword)
        param.resconfig.newPassword = encryptedData(param.resconfig.newPassword)
        param.resconfig.dnewPassword = encryptedData(param.resconfig.dnewPassword)
        let res = await userService.changePass(param)
        if (res.status < 300) {
          goLogin()
        }
      }
    })
  }
</script>
<template>
  <div id="login">
    <div class="login-head">
      <div class="head-box">
        <div class="icon-box"><img src="/favicon.svg" /></div>
        <div class="project-title">PRIM</div>
        <div class="line"></div>
        <div class="pass">通行证</div>
      </div>
    </div>
    <div class="content-box">
      <div class="login-title">PRIM 账号登录</div>
      <div class="login-box">
        <el-form ref="firstRef" label-position="right" label-width="100px" :model="formLabelAlign" :rules="rules" style="margin-top: 60px">
          <el-form-item label-width="0">
            <el-input v-model="formLabelAlign.username" style="width: 400px; height: 40px" :disabled="true" />
          </el-form-item>
          <el-form-item label-width="0" prop="oldPassword">
            <el-input v-model="formLabelAlign.oldPassword" type="password" style="width: 400px; height: 40px" show-password placeholder="请输入旧密码" />
          </el-form-item>
          <el-form-item label-width="0" prop="newPassword">
            <el-input v-model="formLabelAlign.newPassword" type="password" style="width: 400px; height: 40px" show-password placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label-width="0" prop="dnewPassword">
            <el-input v-model="formLabelAlign.dnewPassword" type="password" style="width: 400px; height: 40px" show-password placeholder="请再次输入新密码" />
          </el-form-item>
        </el-form>
        <button class="btn new" style="width: 400px; height: 50px" @click="login(firstRef)">前往登录</button>
        <div class="tips">
          <span>我们为您提供华为帐号服务，在登录过程中会使用到您的帐号和网络信息提升登录体验。</span><span class="more" @click="call">联系超级管理员</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  #login {
    background-color: $border-color;
    height: 100vh;
    position: relative;
    .login-head {
      height: 90px;
      display: flex;
      align-items: center;
      margin-bottom: 70px;
      .head-box {
        height: 30px;
        display: flex;
        align-items: center;
        color: $text-color;
      }
      .icon-box {
        width: 30px;
        height: 30px;
        margin: 0 15px 0 40px;
      }
      .project-title {
        font-size: 30px;
        font-weight: bold;
        font-style: italic;
      }
      .line {
        width: 1px;
        background-color: $text-color;
        height: 30px;
        margin: 0 20px;
      }
      .pass {
        font-size: 22px;
      }
    }
    .content-box {
      background: $blank-color;
      height: 640px;
      width: 1000px;
      margin: 0 auto;
      .el-form-item {
        margin-bottom: 30px;
      }
      .login-title {
        height: 80px;
        display: flex;
        padding: 0 30px;
        align-items: center;
        font-size: 20px;
        color: $text-color;
        border-bottom: 1px solid $border-color;
      }
      .login-box {
        margin: 0 auto;
        width: 480px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .more-login {
          display: flex;
          margin-top: 30px;
          color: $action-color;
          font-size: 14px;
          height: 14px;
          line-height: 14px;
          cursor: pointer;
          .line {
            width: 1px;
            margin: 0 12px;
            background-color: $text-color;
          }
        }
        .tips {
          width: 400px;
          margin-top: 100px;
          font-size: 14px;
          color: $action-color;
          .more {
            color: $main-color;
            cursor: pointer;
          }
        }
      }
    }
    .my-header {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
